<template>
  <div class="containerWhite">
    <el-dialog :title="dialogConfig.name" :visible.sync="dialogVisible" @close="dialogVisible = false" append-to-body>

      <el-form ref="formRef" :model="formData" :rules="rules">
        <el-form-item label="手机号" :label-width="'100px'" prop="phones" v-if="!this.value">
          <el-input v-model="phones" type="textarea" rows="10" autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="'100px'" prop="seriesName" v-else>
          <el-input v-model="formData.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选择商品集" :label-width="'100px'" prop="seriesId">
          <el-input v-model="formData.seriesId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设置折扣" :label-width="'100px'" prop="discount">
          <el-input v-model="formData.discount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" :label-width="'100px'" prop="startTime">
          <el-date-picker v-model="formData.startTime" type="datetime" placeholder="选择日期时间" value-format="timestamp">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截至时间" :label-width="'100px'" prop="endTime">
          <el-date-picker v-model="formData.endTime" type="datetime" placeholder="选择日期时间" value-format="timestamp">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="限购次数" :label-width="'100px'" prop="quantity">
          <el-input v-model="formData.quantity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="剩余次数" :label-width="'100px'" prop="remainingQuantity">
          <el-input v-model="formData.remainingQuantity" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import { whiteUpdateApi, whiteAddApi } from '@api/pop'
export default {
  name: 'WhiteEditDialog',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Object,
    },
    request: {
      type: Object,
    },
    dialogConfig: {
      type: Object,
    },
  },
  data () {
    return {
      posting: false,
      formData: this.setup(this.value),
      phones: '',
      rules: {}
    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    setup () {
      if (!this.value) {
        return {
          id: '',
          discount: '',
          phoneList: [],
          quantity: '',
          remainingQuantity: '',
          seriesId: '',
          startTime: "",
          endTime: "",
        }
      } else {
        const clone = deepClone(this.value)
        return clone
      }
    },

    handleConfirm () {
      this.posting = true
      let func = null
      if (this.formData.id) {
        func = whiteUpdateApi
      } else {
        func = whiteAddApi
      }
      const clone = deepClone(this.formData)
      if (this.phones) {
        clone.phoneList = this.phones.replace(/ /g, "").split('\n')
      }
      func(clone).then(res => {
        if (this.formData.id) {
          this.$emit('success') // 刷新
        } else {
          if (res.data.length > 0) {
            this.$message.error('Failure')
          } else {
            this.$message.success('Success')
          }
        }
        console.log('res', res);
        this.dialogVisible = false
      }).catch((err) => {
        console.log(err)
        this.$message('error')
      })
    },
  },
  watch: {
    visible (val) {
      if (val) {
        this.formData = this.setup()
      }
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible')
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.containerWhite {
}
</style>
